<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="pie_basic" style="width: 100%"></div>
    <div class="buttonWrapper">
      <el-radio-group v-model="radio">
        <el-radio v-for="item in radioList" :key="item.label" :label="item.label"  border size="medium">{{item.text}}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from "@antv/data-set";
export default {
  data() {
    return {
      chart: null,
      radio:'element-active',
      radioList:[{
        label:'element-active',
        text:'图形移入激活(element-active)'
      },{
        label:'element-highlight',
        text:'图形移入高亮(element-highlight)'
      },{
        label:'element-selected',
        text:'图形点击选中(element-selected)'
      },{
        label:'element-single-selected',
        text:'图形点击选中:单选(element-single-selected)'
      }],
      dataList: [
        { label: "衣服", nums: 28 },
        { label: "裤子", nums: 32 },
        { label: "衬衫", nums: 40 },
        { label: "毛衣", nums: 18 },
        { label: "T恤", nums: 52 },
        { label: "围巾", nums: 15 },
      ],
    };
  },
  created() {
    // 模拟数据变化
      setTimeout(() => {
        this.dataList.push(
          { label: "帽子", nums: 8 },
          { label: "皮鞋", nums: 11 }
        );
      }, 2000);
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "pie_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    // 给图表赋值
    this.chart.data(this.transformData(this.dataList));
    // 设置提示信息
    this.chart.tooltip({
      showMarkers: false,
    });
    // 设置 nums 度量，重新格式化数据
    this.chart.scale("nums", {
      formatter(val) {
        return val + "万件";
      },
    });
    // 使用交互效果
    this.chart.interaction("element-active");
    // 设置坐标系为 theta
    this.chart.coordinate("theta", {
      radius: 0.75,
    });
    // 映射图表
    this.chart
      .interval()
      .position("nums")
      .color("label")
      // 设置数据标签
      .label("nums", {
        // 自定义内容
        content: (data) => {
          return `${data.label}: ${data.percent}%`;
        },
      })
      // 设置为层叠，让总值占满整个圆
      // 不设置层叠会以值最大的占满整个圆，其他项照此比例覆盖
      .adjust("stack");
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData( this.transformData(newValue) );
    },
    // 监听radio变化切换交互效果
    radio(newValue,oldValue){
      console.log(newValue)
      this.chart.removeInteraction(oldValue);
      this.chart.interaction(newValue);
      this.chart.render()
    }
  },
  methods: {
    // 计算每一项所占百分比
    transformData(data) {
      const dv = new DataView().source(data);
      const total = data.reduce((pre, item) => pre + item.nums, 0);
      dv.transform({
        type: "map",
        callback(row) {
          row.percent = +((row.nums * 100) / total).toFixed(2);
          return row;
        },
      });
      return dv.rows;
    },
    // 切换交互效果
    changeActive(type){

    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>